<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="../static/js/jquery.min.js" type="text/javascript"></script>
<script src="../static/js/bootstrap.min.js"  type="text/javascript"></script>
<script src="../static/js/jquery-ui.js"  type="text/javascript"></script><!--日历-->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script><!--折线图-->
<link href="../static/css/bootstrap.min.css"  type="text/css" rel="stylesheet">
<link href="../static/css/jquery-ui.css"  type="text/css" rel="stylesheet">
<link href="../static/css/index.css" type="text/css" rel="stylesheet">

<title>学生成绩质量跟踪</title>
<style>
.radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline{
	margin-left:0px;
	}

</style>
</head>

<body>
<!--头部-->
<nav class="navbar navbar-default navbar-fixed-top  top" role="navigation">
  <div class="container-fluid">
  
        <div class="navbar-header" style=" width:100%;">
                  <a class="navbar-brand" href="javascript:history.go(-1);" style=" width:100%;  padding-right:0px;">
                  
                   <span class="glyphicon glyphicon-arrow-left white"></span>
               <!--    <span class="glyphicon glyphicon-pause white" style="margin-left:2%;"></span>-->
                   <span class="white" style="margin-left:10%">学生成绩质量跟踪</span>
                   <span class="glyphicon glyphicon-user white" style="float:right"></span>
                 
                 
                  </a>
          
        
        </div>

   
  
  </div><!-- /.container-fluid -->
</nav>
<!--头部 end-->
<!--主体部分-->

<div class="container" style="margin-top:70px;">
    
     <div class="row" style="margin-top:10px;">
     
     
              <div class="col-sm-12 distance" >
                  
                       <div class="form-group">
                                <label for="" class="col-sm-2 control-label">选择年级</label>
                                <div class="col-sm-10">
                                  <select class="form-control">
                                  <option>1</option>
                                  <option>2</option>
                                  <option>3</option>
                                  <option>4</option>
                                  <option>5</option>
                                </select>
                                </div>
                       </div>
               
               </div>
       
        
              
                <div class="col-sm-12 distance" >
                  
                       <div class="form-group">
                                <label for="" class="col-sm-2 control-label">选择班级</label>
                                <div class="col-sm-10">
                                  <select class="form-control">
                                  <option>1</option>
                                  <option>2</option>
                                  <option>3</option>
                                  <option>4</option>
                                  <option>5</option>
                                </select>
                                </div>
                       </div>
               
               </div>
               
                <div class="col-sm-12 distance" >
                  
                       <div class="form-group">
                                <label for="" class="col-sm-2 control-label">选择学生</label>
                                <div class="col-sm-10">
                                <input type="email" class="form-control" id="" placeholder="选择">
                                </div>
                       </div>
               
               </div>
       
          
             
                <div class="col-xs-12  distance ">
                  <div class="form-group">
 
                    <div class="col-sm-10  text-center">
                         <button class="btn btn-success" type="submit"  style="width:80%">搜索</button>                   
                    </div>
               </div>
                      
               </div>
               
               
      </div>   
      
      <div class="row" style="margin-top:15px;margin-left:1px; margin-right:1px;">
            
         <table class="table table-striped table-bordered text-center"  id="middles">
             <tr>
                <td>时间段</td>
                <td>2016年第一学期</td>
            </tr>
            <tr>
                <td>学号</td>
                <td>101</td>
            </tr>
            
             <tr>
                <td>姓名</td>
                <td>101</td>
            </tr>
            
            
             
             <tr>
                <td>语文</td>
                <td>101</td>
            </tr>
            
               <tr>
                <td>数学</td>
                <td>101</td>
            </tr>
            
             <tr>
                <td>总分</td>
                <td>101</td>
            </tr>
                <tr>
                <td>名次</td>
                <td>101</td>
            </tr>
           
                   
         </table>
       
     
              
      
      </div>  
      
      
      <div class="row">
      
          <div class=" text-center"> <canvas id="canvas"></canvas></div>
          <div class="col-xs-12 text-center">
               <span class="glyphicon glyphicon-stop" style="color:#dcb400">语文</span> 
              <span class="glyphicon glyphicon-stop" style="color:#97bbcd">数学</span>
               <span class="glyphicon glyphicon-stop" style="color:#93cc83">英语</span> 
              <span class="glyphicon glyphicon-stop" style="color:#f28f9d">排名</span>
          </div>
      
      </div><!--row-->
      
    
       
</div><!--container  end-->

<!--主体部分  end-->
<!--底部-->

<div class="container" style="margin-top:25%;">
    <div class="row">
       
     <div class="footer navbar-fixed-bottom">
      <div class="col-xs-12" style=" height:15%"></div>
        <div class="col-md-4  col-xs-4 text-center" >
          <p class="glyphicon glyphicon-home white footer_font"></p>
          <p><a href="" class="white  footer_font2">首页</a></p>
        </div>
        
         <div class="col-md-4 col-xs-4 text-center white  ">
           <p class="glyphicon glyphicon-comment white  footer_font"></p>
           <p><a href=""  class="white  footer_font2">消息</a></p>
         </div>
          <div class="col-md-4 col-xs-4 text-center white" >
           <p class="glyphicon glyphicon-asterisk white footer_font"></p>
           <p ><a href=""  class="white  footer_font2">设置</a></p>
          </div>
        
     </div><!--footer  end-->
    
    </div><!--row  end-->

</div><!--container  end-->


<!--底部end-->
<!--日历-->
<script>
  $(function() {
    $( "#datepicker" ).datepicker({
		
        changeMonth: true,
        changeYear: true
	  
    });
	
	$( "#datepicker2" ).datepicker({
		
        changeMonth: true,
        changeYear: true
	  
    });
  });
  </script>
  <script>
  var lineChartData = {
    labels: ["高一上学期", "高一下学期", "高二上学期", "高二下学期", "高三上学期", "高三下学期"],
    datasets: [{
        fillColor: "rgba(220,220,220,0)",  /**文件颜色**/
        strokeColor: "rgba(220,180,0,1)",  /**笔画色彩**/
        pointColor: "rgba(220,180,0,1)",    /**点颜色**/
        data: [90, 80, 80, 90, 100, 90,75]   /**数据**/    /**语文**/
     }, {
        fillColor: "rgba(151,187,205,0)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        data: [90, 99,90,80, 100, 80, 95]    /**数学**/
    }
	
	, {
        fillColor: "rgba(151,187,205,0)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(147,204,131,1)",
        data: [100,80,85,80, 100, 80, 95]    /**英语**/
    }
	
	, {
        fillColor: "rgba(151,187,205,0)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(242,143,157,1)",
        data: [10,8,3,0,1,9,30]    /**名次**/
    }
	
	]

}




var ctx = document.getElementById("canvas").getContext("2d");
var LineChartDemo = new Chart(ctx).Line(lineChartData, {
	responsive: true,
    pointDotRadius: 10,
    bezierCurve: false,
    scaleShowVerticalLines: false,
    scaleGridLineColor: "black"
});
       
</script>
</body>
</html>
